<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const isRefreshing = ref(false);

// 审批事项类型定义
interface ApprovalItem {
  id: string;
  title: string;
  applicant: string;
  date: string;
  time: string;
  status: 'pending' | 'approved' | 'in-progress';
  statusText: string;
  category: string;
  processInstanceId: string;
}

// 模拟审批数据
const approvalItems = ref<ApprovalItem[]>([
  {
    id: '1',
    title: '员工请假申请',
    applicant: '李小红',
    date: '2024-01-15',
    time: '14:30',
    status: 'pending',
    statusText: '待审批',
    category: '人事审批',
    processInstanceId: 'PROC-001',
  },
  {
    id: '2',
    title: '采购申请单',
    applicant: '王强',
    date: '2024-01-15',
    time: '10:15',
    status: 'approved',
    statusText: '已通过',
    category: '财务审批',
    processInstanceId: 'PROC-002',
  },
  {
    id: '3',
    title: '项目预算申请',
    applicant: '陈思',
    date: '2024-01-14',
    time: '16:45',
    status: 'in-progress',
    statusText: '审批中',
    category: '管理层审批',
    processInstanceId: 'PROC-003',
  },
]);

// 下拉刷新处理
const handleRefresh = async () => {
  isRefreshing.value = true;
  try {
    // 模拟刷新数据
    await new Promise(resolve => setTimeout(resolve, 1000));
    // 实际应用中这里会重新获取数据
  } finally {
    isRefreshing.value = false;
  }
};

// 处理待办提醒点击
const handlePendingReminderPress = () => {
  router.push('/pending-approval');
};

// 处理快捷操作点击
const handleQuickActionPress = (action: string) => {
  switch (action) {
    case 'pending':
      router.push('/pending-approval');
      break;
    case 'approved':
      router.push('/approved-by-me');
      break;
    case 'initiated':
      router.push('/my-initiated');
      break;
    case 'cc':
      router.push('/cc-to-me');
      break;
  }
};

// 处理审批事项点击
const handleApprovalItemPress = (processInstanceId: string) => {
  router.push(`/approval-detail?processInstanceId=${processInstanceId}`);
};

// 查看全部审批事项
const handleViewAllPress = () => {
  router.push('/pending-approval');
};

// 处理通知点击
const handleNotificationPress = () => {
  // 通知功能暂未实现
  console.log('打开通知中心');
};

// 处理数据统计点击
const handleStatisticsPress = () => {
  router.push('/data-statistics');
};

// 处理审批模板点击
const handleTemplatesPress = () => {
  // 审批模板功能暂未实现
  console.log('打开审批模板页面');
};

// 获取状态标签样式
const getStatusBadgeClass = (status: string) => {
  switch (status) {
    case 'pending':
      return 'status-badge-pending';
    case 'approved':
      return 'status-badge-approved';
    case 'in-progress':
      return 'status-badge-in-progress';
    default:
      return 'status-badge-pending';
  }
};
</script>

<template>
  <div class="home-container">
    <div class="home-content" :class="{ 'refreshing': isRefreshing }">
      <!-- 顶部用户信息区域 -->
      <div class="user-header">
        <div class="user-info">
          <div class="user-details">
            <img
              src="https://s.coze.cn/image/F2BsQpSH8I4/"
              alt="用户头像"
              class="user-avatar"
            />
            <div>
              <h2 class="user-name">张明</h2>
              <p class="user-department">技术部 · 总监</p>
            </div>
          </div>
          <button class="notification-icon" @click="handleNotificationPress">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
              <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
            </svg>
            <span class="notification-badge">3</span>
          </button>
        </div>

        <!-- 待办提醒 -->
        <button class="pending-reminder" @click="handlePendingReminderPress">
          <div class="pending-reminder-content">
            <div>
              <p class="pending-reminder-label">待我审批</p>
              <p class="pending-count">12</p>
            </div>
            <div class="pending-reminder-right">
              <p class="pending-change">较昨日 +3</p>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="9 18 15 12 9 6"></polyline>
              </svg>
            </div>
          </div>
        </button>
      </div>

      <!-- 快捷操作区域 -->
      <div class="quick-actions-section">
        <h3 class="section-title">快捷操作</h3>
        <div class="quick-actions-grid">
          <button class="quick-action-card" @click="handleQuickActionPress('pending')">
            <div class="quick-action-icon bg-primary">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"></circle>
                <polyline points="12 6 12 12 16 14"></polyline>
              </svg>
            </div>
            <span class="quick-action-text">待我审批</span>
          </button>

          <button class="quick-action-card" @click="handleQuickActionPress('approved')">
            <div class="quick-action-icon bg-success">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="20 6 9 17 4 12"></polyline>
              </svg>
            </div>
            <span class="quick-action-text">我已审批</span>
          </button>

          <button class="quick-action-card" @click="handleQuickActionPress('initiated')">
            <div class="quick-action-icon bg-blue">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <line x1="12" y1="5" x2="12" y2="19"></line>
                <line x1="5" y1="12" x2="19" y2="12"></line>
              </svg>
            </div>
            <span class="quick-action-text">我发起的</span>
          </button>

          <button class="quick-action-card" @click="handleQuickActionPress('cc')">
            <div class="quick-action-icon bg-purple">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="18" cy="5" r="3"></circle>
                <circle cx="6" cy="12" r="3"></circle>
                <circle cx="18" cy="19" r="3"></circle>
                <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
                <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
              </svg>
            </div>
            <span class="quick-action-text">抄送我的</span>
          </button>
        </div>
      </div>

      <!-- 数据概览 -->
      <div class="data-overview-section">
        <h3 class="section-title">今日概览</h3>
        <div class="data-overview-grid">
          <div class="stats-card">
            <div class="stats-card-gradient bg-primary">
              <p class="stats-value">8</p>
              <p class="stats-label">已处理</p>
            </div>
          </div>

          <div class="stats-card">
            <div class="stats-card-gradient bg-primary-light">
              <p class="stats-value text-orange">12</p>
              <p class="stats-label">待处理</p>
            </div>
          </div>

          <div class="stats-card">
            <div class="stats-card-gradient bg-primary-light">
              <p class="stats-value text-green">2.3h</p>
              <p class="stats-label">平均时长</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 最近审批事项 -->
      <div class="recent-approvals-section">
        <div class="section-header">
          <h3 class="section-title">最近审批</h3>
          <button class="view-all-button" @click="handleViewAllPress">
            查看全部
          </button>
        </div>
        <div class="approvals-list">
          <button
            v-for="item in approvalItems"
            :key="item.id"
            class="approval-item"
            @click="handleApprovalItemPress(item.processInstanceId)"
          >
            <div class="approval-content">
              <h4 class="approval-title">{{ item.title }}</h4>
              <p class="approval-meta">
                申请人：{{ item.applicant }} | {{ item.date }} {{ item.time }}
              </p>
              <div class="approval-tags">
                <span :class="getStatusBadgeClass(item.status)">
                  {{ item.statusText }}
                </span>
                <span class="approval-category">{{ item.category }}</span>
              </div>
            </div>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="9 18 15 12 9 6"></polyline>
            </svg>
          </button>
        </div>
      </div>

      <!-- 更多功能 -->
      <div class="more-functions-section">
        <h3 class="section-title">更多功能</h3>
        <div class="more-functions-grid">
          <button class="function-card" @click="handleStatisticsPress">
            <div class="function-icon bg-primary">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M3 3v18h18"></path>
                <path d="M18 17V9"></path>
                <path d="M13 17V5"></path>
                <path d="M8 17v-3"></path>
              </svg>
            </div>
            <div class="function-content">
              <h4 class="function-title">数据统计</h4>
              <p class="function-subtitle">查看审批数据</p>
            </div>
          </button>

          <button class="function-card" @click="handleTemplatesPress">
            <div class="function-icon bg-pink">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
                <polyline points="14 2 14 8 20 8"></polyline>
                <line x1="16" y1="13" x2="8" y2="13"></line>
                <line x1="16" y1="17" x2="8" y2="17"></line>
                <polyline points="10 9 9 9 8 9"></polyline>
              </svg>
            </div>
            <div class="function-content">
              <h4 class="function-title">审批模板</h4>
              <p class="function-subtitle">常用模板库</p>
            </div>
          </button>
        </div>
      </div>

      <!-- 下拉刷新指示器 -->
      <div v-if="isRefreshing" class="refresh-indicator">
        <svg class="loading-spinner" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
        </svg>
      </div>

      <!-- 底部安全区域 -->
      <div class="bottom-safe-area"></div>
    </div>
  </div>
</template>

<style scoped>
.home-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.home-content {
  transition: transform 0.3s;
}

.home-content.refreshing {
  transform: translateY(20px);
}

/* 顶部用户信息区域 */
.user-header {
  background: linear-gradient(135deg, #969FFF, #5147FF, #3E3987);
  padding: 20px;
  border-radius: 0 0 20px 20px;
  color: white;
}

.user-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.user-details {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.user-name {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.user-department {
  font-size: 14px;
  opacity: 0.8;
  margin: 0;
}

.notification-icon {
  position: relative;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 8px;
}

.notification-badge {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #EF4444;
  color: white;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

/* 待办提醒 */
.pending-reminder {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  border: none;
  width: 100%;
}

.pending-reminder:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.pending-reminder-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pending-reminder-label {
  font-size: 14px;
  opacity: 0.8;
  margin: 0 0 4px 0;
}

.pending-count {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}

.pending-reminder-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.pending-change {
  font-size: 12px;
  opacity: 0.8;
  margin: 0;
}

/* 通用区域样式 */
.quick-actions-section,
.data-overview-section,
.recent-approvals-section,
.more-functions-section {
  padding: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #1F2937;
  margin: 0 0 16px 0;
}

/* 快捷操作区域 */
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.quick-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background-color: white;
  border-radius: 12px;
  padding: 16px 8px;
  cursor: pointer;
  transition: transform 0.2s;
  border: none;
}

.quick-action-card:hover {
  transform: translateY(-2px);
}

.quick-action-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.quick-action-icon.bg-primary {
  background: linear-gradient(135deg, #969FFF, #5147FF);
}

.quick-action-icon.bg-success {
  background: linear-gradient(135deg, #4ADE80, #22C55E);
}

.quick-action-icon.bg-blue {
  background: linear-gradient(135deg, #60A5FA, #3B82F6);
}

.quick-action-icon.bg-purple {
  background: linear-gradient(135deg, #A78BFA, #8B5CF6);
}

.quick-action-text {
  font-size: 12px;
  color: #374151;
}

/* 数据概览区域 */
.data-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.stats-card {
  border-radius: 12px;
  overflow: hidden;
}

.stats-card-gradient {
  padding: 16px;
  text-align: center;
}

.stats-card-gradient.bg-primary {
  background: linear-gradient(135deg, #969FFF, #5147FF);
  color: white;
}

.stats-card-gradient.bg-primary-light {
  background: linear-gradient(135deg, rgba(150, 159, 255, 0.1), rgba(81, 71, 255, 0.1));
  color: #1F2937;
}

.stats-value {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 4px 0;
}

.stats-value.text-orange {
  color: #F97316;
}

.stats-value.text-green {
  color: #22C55E;
}

.stats-label {
  font-size: 12px;
  opacity: 0.8;
  margin: 0;
}

/* 最近审批事项 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.view-all-button {
  background: none;
  border: none;
  color: #969FFF;
  font-size: 14px;
  cursor: pointer;
}

.approvals-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.approval-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: background-color 0.2s;
  border: none;
  text-align: left;
}

.approval-item:hover {
  background-color: #F9FAFB;
}

.approval-content {
  flex: 1;
  margin-right: 12px;
}

.approval-title {
  font-size: 15px;
  font-weight: 500;
  color: #1F2937;
  margin: 0 0 8px 0;
}

.approval-meta {
  font-size: 13px;
  color: #6B7280;
  margin: 0 0 8px 0;
}

.approval-tags {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-badge-pending {
  background-color: #FEF3C7;
  color: #D97706;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
}

.status-badge-approved {
  background-color: #D1FAE5;
  color: #166534;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
}

.status-badge-in-progress {
  background-color: #DBEAFE;
  color: #1E40AF;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
}

.approval-category {
  font-size: 12px;
  color: #6B7280;
}

/* 更多功能区域 */
.more-functions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.function-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: white;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: transform 0.2s;
  border: none;
  text-align: left;
}

.function-card:hover {
  transform: translateY(-2px);
}

.function-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.function-icon.bg-primary {
  background: linear-gradient(135deg, #969FFF, #5147FF);
}

.function-icon.bg-pink {
  background: linear-gradient(135deg, #F472B6, #EC4899);
}

.function-content {
  flex: 1;
}

.function-title {
  font-size: 15px;
  font-weight: 500;
  color: #1F2937;
  margin: 0 0 2px 0;
}

.function-subtitle {
  font-size: 13px;
  color: #6B7280;
  margin: 0;
}

/* 下拉刷新指示器 */
.refresh-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  color: #969FFF;
}

.loading-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 底部安全区域 */
.bottom-safe-area {
  height: 20px;
}
</style>